import { DiagramMatrixConfigurationModel } from "./comps/diagramMatrixConfiguration/DiagramMatrixConfigurationModel";
import { DiagramMapConfigurationModel } from "./comps/diagramMapConfiguration/DiagramMapConfigurationModel";
import { AttributeTabKey, PropertyKey } from "@/constants/Enums";
import { markRaw, reactive, Component } from "vue";
import ThumbnailConfigurationPane from "./comps/ThumbnailConfiguration.vue";
import DiagramHeaderConfigurationPane from "./comps/DiagramHeaderConfiguration.vue";
import ComponentsConfigurationPane from "./comps/ComponentsConfiguration.vue";
import ContainElementsConfigurationPane from "./comps/ContainElementsConfiguration.vue";
import DiagramClassifyConfigurationPane from "./comps/DiagramClassifyConfiguration.vue";
import PriorityConfigurationPane from "./comps/PriorityConfiguration.vue";
import DiagramTableConfigurationPane from "./comps/diagramTableConfiguration/DiagramTableConfiguration.vue";
import DiagramMapConfigurationPane from "./comps/diagramMapConfiguration/DiagramMapConfiguration.vue";
import DiagramMatrixConfigurationPane from "./comps/diagramMatrixConfiguration/DiagramMatrixConfiguration.vue";
import { ipcWindowUtil } from "@/common/ipcWindow/IpcWindowUtil";
import { ThumbnailModel } from "./comps/thumbnailComps/ThumbnailModel";
import { DiagramHeaderModel } from "./comps/diagramHeaderComps/DiagramHeaderModel";
import { ComponentConfigurationModel } from "./comps/componentsConfigurationComps/ComponentConfigurationModel";
import { ContainElementModel } from "./comps/containElementComps/ContainElementModel";
import { WindowName } from "@/mdesign-lib/mdesign-main.js";
import { PriorityModel } from "./comps/priorityConfigurationComps/PriorityModel";
import { DiagramClassifyModel } from "./comps/classifyConfigurationComps/DiagramClassifyModel";
import { modelService } from "../../service";
import { DiagramTableConfigurationModel } from "./comps/diagramTableConfiguration/DiagramTableConfigurationModel";

type TabItem = {
  key: AttributeTabKey;
  name: string;
  comp: Component;
};
type QueryParams = {
  projectId: string;
  modelId: string;
  row: string;
  isModelDisabled: string;
};
export const tabList: TabItem[] = [
  { name: "缩略图配置", key: AttributeTabKey.ThumbnailConfiguration, comp: markRaw(ThumbnailConfigurationPane) },
  { name: "图头配置", key: AttributeTabKey.DiagramHeaderConfiguration, comp: markRaw(DiagramHeaderConfigurationPane) },
  { name: "组件配置", key: AttributeTabKey.ComponentsConfiguration, comp: markRaw(ComponentsConfigurationPane) },
  { name: "可容纳元素范围配置", key: AttributeTabKey.ContainElementsConfiguration, comp: markRaw(ContainElementsConfigurationPane) },
  { name: "视图分类配置", key: AttributeTabKey.DiagramClassifyConfiguration, comp: markRaw(DiagramClassifyConfigurationPane) },
  { name: "优先级配置", key: AttributeTabKey.PriorityConfiguration, comp: markRaw(PriorityConfigurationPane) },
  { name: "表格配置", key: AttributeTabKey.DiagramTableConfiguration, comp: markRaw(DiagramTableConfigurationPane) },
  { name: "矩阵配置", key: AttributeTabKey.DiagramMatrixConfiguration, comp: markRaw(DiagramMatrixConfigurationPane) },
  { name: "追溯图配置", key: AttributeTabKey.DiagramMapConfiguration, comp: markRaw(DiagramMapConfigurationPane) }
];

export class DiagramCustomizationManagementModel {
  queryParams: QueryParams;
  okLoading = false;
  activeTab = AttributeTabKey.ThumbnailConfiguration;
  thumbnailModel: ThumbnailModel;
  diagramHeaderModel: DiagramHeaderModel;
  componentConfigurationModel: ComponentConfigurationModel;
  containElementModel: ContainElementModel;
  priorityModel: PriorityModel;
  diagramClassifyModel: DiagramClassifyModel;
  diagramMatrixConfigurationModel: DiagramMatrixConfigurationModel;
  diagramMapConfigurationModel: DiagramMapConfigurationModel;
  diagramTableConfigurationModel: DiagramTableConfigurationModel;
  configurationDisabled = false; // 配置项是否可用，当定制目标大于1时，缩略图配置和图头配置不可用
  isModelDisabled: boolean; // 是否为扩展库

  constructor(params) {
    this.queryParams = params;

    this.isModelDisabled = this.queryParams.isModelDisabled === "false" ? false : true;
    this.thumbnailModel = reactive(new ThumbnailModel(this));
    this.diagramHeaderModel = reactive(new DiagramHeaderModel(this));
    this.componentConfigurationModel = reactive(new ComponentConfigurationModel(this));
    this.containElementModel = reactive(new ContainElementModel(this));
    this.priorityModel = reactive(new PriorityModel(this));
    this.diagramClassifyModel = reactive(new DiagramClassifyModel(this));

    this.diagramMatrixConfigurationModel = reactive(new DiagramMatrixConfigurationModel(this));
    this.diagramMapConfigurationModel = reactive(new DiagramMapConfigurationModel(this));
    this.diagramTableConfigurationModel = reactive(new DiagramTableConfigurationModel(this));

    //  this.stereotypeModelId = query.stereotypeModelId;
    this.loadData();
  }

  async loadData() {
    const rowData = JSON.parse(this.queryParams.row);
    const diagramConfig = rowData.value && JSON.parse(rowData.value);
    await this.loadProperty();
    this.thumbnailModel.initThumbnailData(diagramConfig?.thumbnailInfo);
    this.diagramHeaderModel.initDiagramHerderData(diagramConfig?.titleConfig);
    this.componentConfigurationModel.initComponentConfigurationrData(diagramConfig?.siderbarConfig);
    this.containElementModel.initElementData(diagramConfig?.elementRange);
    this.priorityModel.initPriorityData(diagramConfig?.priority);
    this.diagramClassifyModel.initDiagramClassifyData(diagramConfig?.classifier);
    this.diagramMatrixConfigurationModel.initData(diagramConfig?.diagramMatrixConfig);
    this.diagramMapConfigurationModel.initData(diagramConfig?.diagramMapConfig);
    this.diagramTableConfigurationModel.initData(diagramConfig?.diagramTableConfig);
  }
  async loadProperty() {
    const propertyData = await modelService.getModelProperties(this.queryParams.projectId, this.queryParams.modelId);
    const targetValue: any[] = propertyData?.find(item => item.key === PropertyKey.MetaConfig_target)?.value as any[];
    if (targetValue && targetValue.length > 1) {
      this.configurationDisabled = true;
    }
  }

  changeActiveTab(key: AttributeTabKey) {
    this.activeTab = key;
  }

  async handleOk() {
    this.okLoading = true;
    // 数据格式处理
    const _thumbnailInfo = {
      img: this.thumbnailModel.thumbnailInfo.find(item => item.key === "DiagramThumbnail").value,
      description: this.thumbnailModel.thumbnailInfo.find(item => item.key === "DiagramDesc").value
    };
    const _siderbarConfig = this.componentConfigurationModel.siderbarConfig.map(item => {
      return {
        id: item.id,
        cnName: item.cnName,
        enName: item.enName,
        isActive: item.isActive,
        children: item.children.map(child => {
          if (child?.shapeKey) {
            return { shapeKey: child.shapeKey, dropdownTag: child.dropdownTag || "" };
          } else {
            return { modelId: child?.id, operation: child.operation || "", dropdownTag: child.dropdownTag || "" };
          }
        })
      };
    });
    const _elementRange = this.containElementModel.elementRange.map(item => item.id);
    const diagramConfigInfo = {
      /*  projectId: this.queryParams.projectId,
      id: this.queryParams.modelId, // 视图构造型id */
      thumbnailInfo: _thumbnailInfo,
      titleConfig: this.diagramHeaderModel.titleConfig,
      elementRange: _elementRange,
      siderbarConfig: _siderbarConfig,
      priority: this.priorityModel.priority,
      classifier: this.diagramClassifyModel.classifier,
      diagramTableConfig: this.diagramTableConfigurationModel.getData(),
      diagramMapConfig: this.diagramMapConfigurationModel.getData(),
      diagramMatrixConfig: this.diagramMatrixConfigurationModel.getData()
    };
    try {
      ipcWindowUtil.closeWindow({
        windowName: WindowName.DiagramCustomizationWindow,
        success: true,
        diagramConfig: JSON.stringify(diagramConfigInfo)
      });
    } finally {
      this.okLoading = false;
    }
  }

  handleCancel() {
    ipcWindowUtil.closeWindow({ windowName: WindowName.DiagramCustomizationWindow, success: false, diagramConfig: "" });
  }
}
